<template>
  <div>
    <t-card>
      <t-form :data="searchFormdata" layout="inline">
        <t-form-item label="渠道名称" name="companyName">
          <t-input v-model="searchFormdata.companyName" placeholder="请输入渠道名称" type="search" />
        </t-form-item>
        <t-form-item label="导游" name="guideName">
          <t-input v-model="searchFormdata.guideName" placeholder="请输入导游姓名" type="search" />
        </t-form-item>
        <t-form-item label="导游状态" name="enabled">
          <t-select v-model="searchFormdata.enabled" placeholder="请选择导游状态" clearable>
            <t-option v-for="item in EnabledStatus" :key="item" :label="enabledStatusDict[item]" :value="item" />
          </t-select>
        </t-form-item>

        <t-button :loading="dataLoading" @click="handleSearchClick">
          查询
        </t-button>
      </t-form>
      <t-divider />
      <div>
        <t-button @click="handleAddGuideClick">
          添加导游
        </t-button>
      </div>
      <!-- @vue-expect-error -->
      <t-table :data="data" :columns="columns" row-key="id" :pagination="pagination" cell-empty-content="-" :loading="dataLoading" table-layout="auto">
        <template #op="{ row }">
          <t-row align="center" :gutter="8">
            <t-button @click="handleViewGuideQRCodeClick(row)">
              QR 码
            </t-button>
            <t-button @click="handleUpdateGuideClick(row)">
              编辑
            </t-button>
            <t-button theme="danger" @click="handleRemoveGuideClick(row)">
              删除
            </t-button>
          </t-row>
        </template>
      </t-table>
    </t-card>
    <guide-form-dialog :id="editedGuideId" v-model:visible="guideFormDialogVisible" :data="guideFormDialogData" @success="handleSuccess" />
    <guide-q-r-code-dialog :id="guideQRCodeId" v-model:visible="guideQRCodeDialogVisible" :name="guideQRCodeName" />
  </div>
</template>
<script setup lang="ts">
import type { PaginationProps, PrimaryTableCol } from 'tdesign-vue-next'
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next'
import { reactive, ref } from 'vue'

import { deleteChannelGuides, getChannelGuidePageList } from '@/api/channel'
import type { GuideRes } from '@/api/model/channel'
import { GuideGender, GuideQuotaType } from '@/api/model/channel'
import { EnabledStatus } from '@/api/model/common'
import { channelGuideGenderDict, channelGuideQuotaTypeDict } from '@/utils/dict/channel'
import { enabledStatusDict } from '@/utils/dict/common'

import type { GuideFormDialogData } from './component/GuideFormDialog.vue'
import GuideFormDialog from './component/GuideFormDialog.vue'
import GuideQRCodeDialog from './component/GuideQRCodeDialog.vue'

const searchFormdata = reactive({
  companyName: '',
  guideName: '',
  enabled: '' as EnabledStatus | '',
})

type GuideTableData = GuideRes

const data = ref<GuideTableData[]>([])
const dataLoading = ref(false)
const pagination = reactive<PaginationProps>({
  current: 1,
  pageSize: 10,
  total: 0,
})

function fetchData() {
  dataLoading.value = true
  getChannelGuidePageList({ page: pagination.current!, size: pagination.pageSize!, ...searchFormdata }).then((res) => {
    data.value = res.data
    pagination.total = res.total
  }).finally(() => {
    dataLoading.value = false
  })
}
fetchData()

function handleSearchClick() {
  pagination.current = 1
  fetchData()
}

const columns: PrimaryTableCol<GuideTableData>[] = [
  {
    colKey: 'companyName',
    title: '渠道名称',
  },
  {
    colKey: 'guideName',
    title: '导游',
    width: 100,
  },
  {
    colKey: 'phone',
    title: '导游电话',
    width: 125,
  },
  {
    colKey: 'gender',
    title: '性别',
    cell: (_, { row }) => {
      return channelGuideGenderDict[row.gender]
    },
    width: 60,
  },
  {
    colKey: 'quotaType',
    title: '配额类型',
    cell: (_, { row }) => {
      return channelGuideQuotaTypeDict[row.quotaType]
    },
    width: 100,
  },
  {
    colKey: 'quotaAll',
    title: '个人总配额',
    width: 120,
  },
  {
    colKey: 'quotaBalance',
    title: '个人剩余配额',
    width: 120,

  },
  {
    colKey: 'enabled',
    title: '状态',
    cell: (_, { row }) => {
      return enabledStatusDict[row.enabled]
    },
    width: 60,
  },
  {
    colKey: 'op',
    title: '操作',
  },
]

const guideFormDialogData = reactive<GuideFormDialogData>({
  companyId: '',
  guideName: '',
  phone: '',
  gender: GuideGender.MALE,
  quotaAll: 0,
  enabled: EnabledStatus.ENABLED,
  quotaType: GuideQuotaType.PERSON,
})
const guideFormDialogVisible = ref(false)
const editedGuideId = ref<string>()
function handleAddGuideClick() {
  editedGuideId.value = undefined
  guideFormDialogData.companyId = ''
  guideFormDialogData.guideName = ''
  guideFormDialogData.phone = ''
  guideFormDialogData.gender = GuideGender.MALE
  guideFormDialogData.quotaAll = 0
  guideFormDialogData.enabled = EnabledStatus.ENABLED
  guideFormDialogData.quotaType = GuideQuotaType.PERSON
  guideFormDialogVisible.value = true
}

function handleUpdateGuideClick(row: GuideTableData) {
  editedGuideId.value = row.id
  guideFormDialogData.companyId = row.companyId
  guideFormDialogData.guideName = row.guideName
  guideFormDialogData.phone = row.phone
  guideFormDialogData.gender = row.gender
  guideFormDialogData.quotaAll = +row.quotaAll
  guideFormDialogData.enabled = row.enabled
  guideFormDialogData.quotaType = row.quotaType
  guideFormDialogVisible.value = true
}

function handleSuccess() {
  pagination.current = 1
  fetchData()
}
const guideQRCodeDialogVisible = ref(false)
const guideQRCodeId = ref<string>('')
const guideQRCodeName = ref<string>('')
function handleViewGuideQRCodeClick(row: GuideTableData) {
  guideQRCodeId.value = row.id
  guideQRCodeName.value = row.guideName
  guideQRCodeDialogVisible.value = true
}

function handleRemoveGuideClick(row: GuideTableData) {
  const dialog = DialogPlugin.confirm({
    header: '确定删除当前导游？',
    body: `确定要删除导游 ${row.guideName} 吗?删除后将不可恢复。`,
    theme: 'danger',
    confirmBtn: {
      loading: false,
      theme: 'danger',
    },
    onConfirm: () => {
      dialog.update({
        confirmBtn: {
          loading: true,
        },
      })
      deleteChannelGuides([row.id]).then(() => {
        dialog.update({
          confirmBtn: {
            loading: false,
          },
        })
        dialog.hide()
        MessagePlugin.success('导游删除成功')
        fetchData()
      })
    },
  })
}
</script>
<style scoped>

</style>
